<template>
  <div class="protocol-main">
    <div class="item-top-box">
      <div class="item-top-box-title"></div>
      <div class="detail-btn">详情<i class="el-icon-caret-right"></i></div>
    </div>
    <div class="item-center">
      <dv-border-box-7 :color="['#0054A3', '#2BCCFF']">
        <div class="group">
          <div class="left">
            <div id="protocol-echarts11">
              <son-component id="protocol-echarts1" color="#208EF3" text="书面协议" :value="185" />
            </div>
          </div>
          <div class="right">
            <div id="protocol-echarts22">
              <son-component id="protocol-echarts2" color="#F5CD2D" text="已履行" :value="242" />
            </div>
            <div id="protocol-echarts33">
              <son-component id="protocol-echarts3" color="#11C0C0" text="司法确认" :value="242" />
            </div>
          </div>
        </div>
      </dv-border-box-7>
    </div>
  </div>
</template>

<script>
import SonComponent from './ProtocolComponent'
// 协议形式/协议履行情况
export default {
  name: 'Protocol',
  components: { SonComponent },
  data() {
    return {
      //
    };
  }
};
</script>

<style lang="less" scoped>
.protocol-main {
  height: 86.5%;
  width: 90%;
  padding: 0px 20px 20px 20px;
}
.protocol-main .item-top-box {
  display: flex;
  flex-direction: row;
  position: relative;
}
.protocol-main .item-top-box-title {
  background-image: url('~@/assets/title7.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  height: 32px;
  width: 100%;
}
/* 详情 */
.protocol-main .item-top-box .detail-btn {
  font-size: 16px;
  font-family: BBT;
  font-weight: normal;
  color: #2bccff;
  position: absolute;
  right: 0;
  cursor: pointer;
}
/* 内容区域 */
.protocol-main .item-center {
  height: 90%;
  width: 100%;
  padding: 5px 0px;
  .group {
    display: flex;
    justify-content: space-between;
    height: 100%;
    .left {
      height: 100%;
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .right {
      height: 100%;
      width: 50%;
    }
  }
}
</style>
